<!--好店推荐 -->
<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item >好店推荐</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">

      <el-row class="main">
        <el-row  style="min-height: 40px;display: flex;">
          <el-col  style="margin-bottom: 5px;" align="left">
            <el-input v-model="key" clearable style="width: 300px;" placeholder="输入关键词查询" class="kz_search">
              <el-button slot="append" type="primary"  @click="getstart()">搜索</el-button>
            </el-input>
          </el-col>
          <el-col  style="margin-bottom: 5px;" align="right">
            <el-button type="primary" @click="add()" style="">添加好店</el-button>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table
          select-on-indeterminate
          ref="multipleTable"
          border
          align="left"
          :data="tableData"
        v-if="refresh">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            label="排序"
            width="50">
            <template slot-scope="scope">
              <i @click="cpU(scope.row.sort-1)" v-if="scope.row.sort !== 1 &&  refresh" class="iconfont iconjiantoushang" style="color: black;font-size: 20px"></i>
              <i @click="cpD(scope.row.sort-1)" v-if="scope.row.sort !== tableData.length && refresh" class="iconfont iconjiantouxia" style="color: black;font-size: 20px"></i>
              <!--<div style="display: flex;flex-direction: column" v-for="(item,index) in tableData" :key="index">-->
              <!--<i @click="cpU(index)" v-if="index !== 1 &&  refresh" class="iconfont iconjiantoushang" style="color: black;font-size: 20px"></i>-->
                <!--<i @click="cpD(index)" v-if="index !== tableData.length && refresh" class="iconfont iconjiantouxia" style="color: black;font-size: 20px"></i>-->
              <!--</div>-->
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="KTV店铺名称">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话">
          </el-table-column>
          <el-table-column
            label="展示时间段"
            width="130">
            <template slot-scope="scope">
              <span style="margin-right: 5px;">{{scope.row.begin_time}}</span>
              至
              <span style="margin-left: 5px;">{{scope.row.over_time}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="license"
            label="营业执照">
            <template slot-scope="scope">
              <el-button @click="detailZZ(scope.row.license)"  style="" size="small" type="text">
                查看详情
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="addtime"
            label="创建时间">
            <template slot-scope="scope">
            {{formatDate(scope.row.addtime)}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="changeMes(scope.row.platform_id,0)" style="color: red" size="small" type="text">
                删除
              </el-button>
              <el-button @click="edit(scope.row)"  style="" size="small" type="text">
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right;margin-bottom:70px;"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
    <el-dialog title="添加好店" :visible.sync="addVisible" width="500px" :modal-append-to-body="false">
      <el-form :model="adddata" :rules="addrules" ref="adddata">
        <el-form-item label="名称：" :label-width="formLabelWidth" prop="shop_id">
          <el-select style="width: 320px;" v-model="adddata.shop_id" clearable  placeholder="请选择KTV商铺">
            <el-option
              v-for="item in shopData"
              :key="item.shop_id"
              :label="item.name"
              :value="item.shop_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展示时间段：" :label-width="formLabelWidth" prop="begin_time over_time">
          <div style="display: flex;margin-left: 10px;">
            <el-time-select
              v-model="adddata.begin_time"
              placeholder="请选择时间"
              style="width: 150px;margin-right: 10px;"
              :picker-options="{
                  start: '00:00',
                  step: '00:10',
                  end: '23:59',
                }">
            </el-time-select>
            -
            <el-time-select
              v-model="adddata.over_time"
              :picker-options="{
               start: '00:00',
               step: '00:10',
               end: '23:59',
               minTime: adddata.begin_time
              }"
              placeholder="请选择时间"
              style="width: 150px;margin-left: 10px;">
            </el-time-select>
          </div>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SubmitAdd()">确 定</el-button>
        <el-button @click="addVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑好店" :visible.sync="editVisible" width="360px" :modal-append-to-body="false">
      <el-form :model="editdata" :rules="editrules" ref="adddata">
        <el-form-item label="展示时间段：" :label-width="formLabelWidth" prop="begin_time over_time">
          <div style="display: flex;margin-left: 10px;">
            <el-time-select
              v-model="editdata.begin_time"
              placeholder="请选择时间"
              style="width: 150px;margin-right: 10px;"
              :picker-options="{
                  start: '00:00',
                  step: '00:10',
                  end: '23:59',
                }">
            </el-time-select>
            -
            <el-time-select
              v-model="editdata.over_time"
              :picker-options="{
               start: '00:00',
               step: '00:10',
               end: '23:59',
               minTime: editdata.begin_time
              }"
              placeholder="请选择时间"
              style="width: 150px;margin-left: 10px;">
            </el-time-select>
          </div>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SubmitEdit()">确 定</el-button>
        <el-button @click="editVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="详情" :visible.sync="detailVisible" width="600px" :modal-append-to-body="false">
      <img :src="license" alt="">
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "GoodShop",
    mounted() {
      // if (!this.$store.state.login.in) {
      //   this.$router.push({name: "login", params: {userId: 123}})
      // }
      this.getstart()
    },
    data() {
      return {
        refresh:true,
        pageSize: 10,
        page: 1,
        dataTotal: 0,
        tableData:[{name:'江南'}],
        addVisible:false,
        formLabelWidth:'120px',
        shopData:[],
        adddata:{
          shop_id:'',
          begin_time:'',
          over_time:'',
        },
        addrules:{
          shop_id: [
            {required: true, message: '请选择好店', trigger: 'blur'}
          ],
          begin_time: [
            {required: true, message: '请选择开始时间', trigger: 'blur'}
          ],
          over_time: [
            {required: true, message: '请选择结束时间', trigger: 'blur'}
          ],
        },
        editVisible:false,
        editdata:{
          id:'',
          begin_time:'',
          over_time:'',
        },
        editrules:{
          begin_time: [
            {required: true, message: '请选择开始时间', trigger: 'blur'}
          ],
          over_time: [
            {required: true, message: '请选择结束时间', trigger: 'blur'}
          ],
        },
        restVisible:false,
        restdata:{
          new_password:'',
          platform_id:'',
        },
        restrules:{
          new_password: [
            {required: true, message: '请输入新密码', trigger: 'blur'}
          ],
        },
        key:'',
        detailVisible:false,
        license:'',
      }
    },
    computed:{
      userdata(){
        return this.$store.state.login.user
      }
    },
    methods: {
      cpD(index){
        let thi = this
        var p = thi.tableData[index]
        var l = thi.tableData[index+1]
        thi.tableData[index+1] = p
        thi.tableData[index] = l
        var a = []
        for (var i = 0; i < thi.tableData.length; i++) {
          var u = {
            'id': thi.tableData[i].id,
            'sort': i + 1
          }
          a.push(u)
        }
        console.log(a)
        var b = JSON.stringify(a)
        var c = {json: b}
        thi.mySubmit('editSort', c).then(function (code) {
          if (code==200) {
            thi.getstart()
          }
        })
      },
      cpU(index){
        let thi = this
        var p = thi.tableData[index]
        var l = thi.tableData[index-1]
        thi.tableData[index-1] = p
        thi.tableData[index] = l
        var a = []
        for (var i = 0; i < thi.tableData.length; i++) {
          var u = {
            'id': thi.tableData[i].id,
            'sort': i + 1
          }
          a.push(u)
        }
        console.log(a)
        var b = JSON.stringify(a)
        var c = {json: b}
        thi.mySubmit('editSort', c).then(function (code) {
          if (code==200) {
            thi.getstart()
          }
        })

      },
      edit(data){
        console.log(data)
        this.editdata = JSON.parse(JSON.stringify(data))
        this.editdata.id = data.shop_id
        this.editVisible = true
      },
      //营业执照详情
      detailZZ(data){
        this.license = data
        this.detailVisible = true
      },
      restPassword(id){
        this.restVisible = true
        this.restdata.platform_id = id
      },
      SubmitEdit(){
        let thi = this
        if (thi.editdata.user_account == ''  || thi.editdata.user_name == ''){
          thi.$message({
            message: '请上传完整信息！',
            type: 'error',
          });
          return false
        }
        thi.editdata.permission = thi.$store.state.login.user.permission
        thi.mySubmit('edit', thi.editdata).then(function (code) {
          if (code==200) {
            thi.editVisible = false
            thi.getstart()
          }
        })
      },
      SubmitAdd(){
        let thi = this
        if (thi.adddata.shop_id == '' || thi.adddata.begin_time == '' || thi.adddata.over_time == ''){
          thi.$message({
            message: '请上传完整信息！',
            type: 'error',
          });
          return false
        }
        thi.mySubmit('addRecommend', thi.adddata).then(function (code) {
          if (code==200) {
            thi.addVisible = false
            thi.getstart()
          }
        })
      },
      SubmitRest(){
        let thi = this
        if (thi.restdata.new_password == ''){
          thi.$message({
            message: '请输入新密码！',
            type: 'error',
          });
          return false
        }
        thi.mySubmit('rPassWord', thi.restdata).then(function (code) {
          if (code==200) {
            thi.restVisible = false
            thi.getstart()
          }
        })
      },
      details(data){
        this.$store.state.login.platformId = data
        this.$router.push({name:'platformDetail'})
        console.log(this.$store.state.login.platformId)

      },
      add(){
        this.addVisible = true
        this.getShop()
      },
      //好店列表
      getstart() {
        let thi = this
        const prams = {
          page:thi.page,
          pageSize:thi.pageSize,
          key:thi.key,
        }
        thi.mySelectAll('recommendList',prams).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      //商铺列表
      getShop() {
        let thi = this
        const prams = {
          page:1,
          pageSize:9999,
          key:'',
        }
        thi.mySelectAll('shopList',prams).then(function (value) {
          thi.shopData = value.data
        })
      },

      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.page = val
        this.getstart()
      },
      //状态改变提示
      changeMes(id, state) {
        var heeh = '该'
        var caozuo = '禁用'
        if (id.length > 1) {
          heeh = '这些'
        }
        if (state == 0) {
          caozuo = '删除'
        }
        let thi = this
        thi.$confirm('此操作将'+caozuo + heeh+'平台', '是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          thi.submitState(id,state)
        }).catch(() => {
          thi.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //删除
      submitState(id,state) {
        let thi = this
        const por = {
          platform_id: id,
          state: state,
        }
        console.log(por)
        thi.mySubmit('platformState', por).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
  .el-row{
    /*防止页面抖动*/
    width: calc(100% - 2px) !important;
  }
</style>
